Vue build --modern でBundleサイズを減らす

Build Modern Mode

公式の説明が一番わかりやすい

まとめると

build --modern を使うとモダンブラウザ用とレガシーブラウザ用に2つのバンドルを生成する

モダンブラウザ用のバンドルは効率が良い（Hello World アプリケーションで約16%のコード量削減）

どちらのバンドルを読み込むかは自動で判断する

初期値はレガシーバンドルしか作らない

2つバンドル作るため、ビルドの時間長くなるから

実際に試した

https://gyazo.com/60c1e0a090cb97b92842e59532636446 https://gyazo.com/a759bc2019cb00bb16047076ef4cda71

左レガシービルド（472.04KB）右モダンビルド（406.07KB）

約14％削減された

数行追加するだけで14%もサイズを削減できるのは強い

Script

package.json にスクリプトとして登録しておくと便利

npm run buildm でモダンモードでビルドされる

code: package.json

"scripts": {

"buildm": "vue-cli-service build --modern"

}

参考